<template>
    <div>
        <el-button
            v-if="!userStore.isLogin"
            type="primary"
            @click="appStore.setPopup(popupEnum.LOGIN)"
        >
            登录/注册
        </el-button>

        <el-dropdown v-else class="px-2.5 h-full" @command="handleCommand">
            <div class="flex items-center">
                <el-avatar :size="30" :src="userInfo.avatar" />
                <div class="ml-2 mr-1">{{ userInfo.nickname }}</div>
                <icon name="el-icon-ArrowDown" />
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <router-link to="/user/center">
                        <el-dropdown-item>个人设置</el-dropdown-item>
                    </router-link>
                    <el-dropdown-item :divided="true" command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { popupEnum } from '~/enums/app'
import useAppStore from '~/stores/app'
import useUserStore from '~/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()

// 用户信息
const userInfo = computed(() => {
    return {
        avatar: userStore.users.avatar,
        nickname: userStore.users.nickname
    }
})

// 指令处理
const handleCommand = async (command: string) => {
    switch (command) {
        case 'logout':
            feedback.confirm('确定退出登录吗？')
                .then(async () => {
                    await userStore.logout()
                }).catch(() => {})
    }
}
</script>
